<template>
	<view>
		<text v-if="inactiveLabel">{{inactiveLabel}}</text>
		<switch class="gui-margin-x-small" :checked="checked" @change="change" color="#008AFF" />
		<text v-if="activeLabel">{{activeLabel}}</text>
	</view>
</template>

<script>
	export default {
		name: "hyb-switch",

		props: {
			modelValue: {
				type: Number,
				default: 0
			},
			inactiveLabel: {
				type: String,
				default: ''
			},
			activeLabel: {
				type: String,
				default: ''
			}
		},
		computed: {
			checked: function() {
				if (this.modelValue) return true;
				return false;
			}
		},
		methods: {
			change(e) {
				let val = e.detail.value ? 1 : 0;
				setTimeout(() => {
					this.$emit('input', val);
					this.$emit('update:modelValue', val)
					this.$emit('change', val);
				})

			}
		}
	}
</script>

<style>

</style>